@import '@/lib/reset.scss';

.player{
    @include rect(100%, 758px);
    .player-content{
        z-index: 10;
        position: absolute;
        @include rect(100%, 100%);
        @include background-color(rgba(0,0,0,0.4));
        .logo{
            @include text-color(rgba(255,255,255,0.5));
            display: block;
            @include font-size(20px);
            @include margin(14px 0 30px 26px);
            width: 46px;
            cursor: pointer;
            &:hover{
                @include text-color(#fff);
            }
        }
        .con-vessel{
            @include rect(1220px, 642px);
            @include margin(0 auto);
            .con-v-left{
                float: left;
                @include rect(780px, 578px);
                .left-operate{
                    @include rect(640px, 38px);
                    display: flex;
                    @include justify-content(space-between);
                    li{
                        @include rect(120px, 36px);
                        border: 1px solid rgba(255,255,255,0.3);
                        @include text-color(rgba(255,255,255,0.7));
                        @include font-size(15px);
                        @include text-align(center);
                        @include line-height(36px);
                        border-radius: 2px;
                        cursor: pointer;
                        &:hover{
                            @include text-color(#fff);
                            border: 1px solid #fff;
                        }
                    }
                }
                h2{
                    @include rect(780px, 50px);
                    border-top: 1px solid rgba(255,255,255,0.1);
                    display: flex;
                    @include align-items(center);
                    @include text-color(rgba(255,255,255,0.7));
                    font-weight: 100;
                    position: relative;
                    input{
                        appearance: none;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        border: 1px solid rgba(255,255,255,0.3);
                        background: 0;
                        @include rect(16px, 16px);
                        &:hover{
                            border: 1px solid rgba(255,255,255,0.8);
                        }
                    }
                    p{
                        margin: 0;
                        position: absolute;
                        left: 60px;
                    }
                    span{
                        display: block;
                        position: absolute;
                        left: 495px;
                    }
                    b{
                        position: absolute;
                        left: 684px;
                    }
                }
                .left-songList{
                    @include rect(800px, 450px);
                    overflow: auto;
                    &::-webkit-scrollbar {/*滚动条整体样式*/
                        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                        height: 5px;
                    }
                    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                        border-radius: 5px;
                        background: rgba(255,255,255,0.1);
                    }
                    &::-webkit-scrollbar-thumb:hover{
                      background: rgba(255,255,255,0.3);
                    }
                    li{
                        @include rect(780px, 50px);
                        border-top: 1px solid rgba(255,255,255,0.1);
                        display: flex;
                        @include align-items(center);
                        @include text-color(rgba(255,255,255,0.7));
                        position: relative;
                        input{
                            appearance: none;
                            -moz-appearance: none;
                            -webkit-appearance: none;
                            border: 1px solid rgba(255,255,255,0.3);
                            background: 0;
                            @include rect(16px, 16px);
                            &:hover{
                                border: 1px solid rgba(255,255,255,0.8);
                            }
                        }
                        p{
                            margin: 0;
                            position: absolute;
                            left: 60px;
                        }
                        span{
                            display: block;
                            position: absolute;
                            left: 495px;
                        }
                        b{
                            position: absolute;
                            left: 684px;
                            font-weight: 400;
                        }
                    }
                }
            }
            .con-v-right{
                float: right;
                @include rect(340px, 578px);
                img{
                    @include rect(186px, 186px);
                    @include margin(0 auto 20px);
                    display: block;
                }
                p{
                    @include rect(100%, 350px);
                    overflow: auto;
                    text-align: center;
                    @include text-color(rgba(255,255,255,0.7));
                    &::-webkit-scrollbar {/*滚动条整体样式*/
                        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                        height: 5px;
                    }
                    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                        border-radius: 5px;
                        background: rgba(255,255,255,0.1);
                    }
                    &::-webkit-scrollbar-thumb:hover{
                      background: rgba(255,255,255,0.3);
                    }
                }
            }
            .con-v-bottom{
                float: left;
                @include rect(100%, 58px);
                audio{
                    @include rect(100%, 100%);
                    margin: 0;
                }
            }
        }
    }
    .player-shadow{
        @include rect(100%, 758px);
        background-color: #000;
        background-position: center;
        // background: url(https://api.bzqll.com/music/netease/pic?id=1325898368&imgSize=400&key=579621905);
        // background-size: cover;
        background-position: -100px -200px;
        -webkit-filter: blur(40px);
        -moz-filter: blur(40px);
        -ms-filter: blur(40px);
        filter: blur(40px);
        position: absolute;
        top: 0;
        left: 0;
    }
}